<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline filter-container">
      <el-form-item prop="dateType" label="时间：">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-download"    @click="exportExcel">导出</el-button>
    </el-form>
    <div class="tip">
      <el-tip>
        注：目前只支持平层搜索，不可跨层搜索
      </el-tip>
    </div>
    <el-table :data="tableData" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="日期" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.date}}
        </template>
      </el-table-column>
      <el-table-column label="账户名" align="center">
        <template slot-scope="{row}">
          <el-tag class="pointer" @click.native="openDialog({props: row, dialogName: 'custom-dialog'})">
            {{row.userName}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="账户类型" fixed="left" width="120" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column> -->
       <el-table-column label="充值额" align="center" prop="rechargeSum">
          <template slot-scope="{row}">
            {{row.rechargeSum | currency}}
          </template>
        </el-table-column>
       <el-table-column label="提现额" align="center" prop="withdrawSum">
          <template slot-scope="{row}">
            {{row.withdrawSum | currency}}
          </template>
        </el-table-column>
         <el-table-column label="充值手续费" align="center" prop="rechargeFeeSum">
          <template slot-scope="{row}">
            {{row.rechargeFeeSum | currency}}
          </template>
        </el-table-column>
         <el-table-column label="提现手续费" align="center" prop="withdrawFeeSum">
          <template slot-scope="{row}">
            {{row.withdrawFeeSum | currency}}
          </template>
        </el-table-column>
         <el-table-column label="红利（加币）" align="center" prop="bonusSum">
        <template slot-scope="{row}">
          {{row.bonusSum | currency}}
        </template>
      </el-table-column>
      <el-table-column label="返水" align="center" prop="rebateSum">
        <template slot-scope="{row}">
          {{row.rebateSum | currency}}
        </template>
      </el-table-column>
    </el-table>

    <custom-dialog :visible="dialogVisible" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">&nbsp;</div>
      <sub-list v-if="dialogVisible" :row-data="dialogProps"></sub-list>
    </custom-dialog>
  </div>
</template>

<script>
  import {form, grid, dialog,handleDownload} from '@/build';

  import SubList from './subList';

  import {
    reportPlayerListApi as listApi,
  } from '@/services/api/report';

  export default {
    name: 'report-player',

    mixins: [form, grid, dialog,handleDownload],

    components: {
      SubList
    },

    data() {
      const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      return {
        tableData:[],
        form: {
          userName: undefined,
          time: monthTime,
        },
         filters: {
          stime: moment(monthTime[0]).valueOf(),
          etime: moment(monthTime[1]).valueOf() +  86399999,
          export:undefined,
        },
      }
    },

    methods:{
      submitFilterForm() {
        const {time,userName} = this.form;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() +  86399999;
        }
        this.filters = {...this.filters,stime, etime,userName}
        this.getAll()
      },
    },

    mounted() {
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data => {
          let result = [];
          let sortData = [];
          _.forIn(data, (value, key) => {
            result.push({...value,date:key})
          })
          sortData = _.sortBy(result,(item)=>{
            return item.date;
          });
          return sortData;
        }
      });

      this.getAll();
    }
  }
</script>
